@import "base";

$fsz:50;
$p1bg:#f1f1f1;
$titlecol:#333;
$centerPcol:#999;
@function rem($value){
    @return  $value/$fsz*1rem;   
}
@mixin center{margin:0 auto;width:rem(750);}
@mixin tac{text-align: center}
@mixin leftTop($value:0,$val:0){margin-left:$value; margin-top:$val;}
@mixin mbom($value:0){margin-bottom:$value;}
@mixin menuCur{box-shadow: 0px 0px 26px 0px rgba(171, 171, 171, 0.196);}
// banner
div.banner{
    @include center;.bannerImg{width: rem(750);height: rem(350);} position:relative;
   .p{width:rem(160);height: rem(60);background-color: $p1bg;border-radius:rem(50);color:$centerPcol;
    line-height: rem(60);@include tac;cursor:pointer;position:absolute;right:rem(20);top:rem(20);}
    p.curP{background-color: #d3c9c6;color:#fff;display:none;z-index:10;}
}
// 四个模板内容
section.center{
    @include center;margin-top: rem(40);
    ul.menu{
            width: rem(640);margin:0 auto;margin-bottom:rem(100);
        li{float:left;div{cursor:pointer;
                width: rem(160); height:rem(70);z-index: 5;font-size:rem(30);line-height:rem(70);
             @include tac;border-radius:rem(50);}
             .box1,.box2,.box3,.box4{@include menuCur;}
        }
    }
// 品牌 
div.centerPp{
    div.title{
       width:rem(670);position:relative;
        p.titleP1{color:$titlecol; @include tac;margin-bottom: rem(40);font-size: rem(44)}
        .titleImg{position:absolute;right:0;bottom:rem(50);width: rem(28);height: rem(38);}
        .titleI{display:block;width: 100%;height: 1px;background-color: #e9e9e9;
            margin:0 auto;margin-bottom:rem(40);}
    }
 p.titleP2{width: rem(630);margin:0 auto;color:$centerPcol;margin-bottom:rem(70);}
  
   ul{
       li.listLI{
            margin-bottom:rem(40);
            div.shadowPp{
                        position:relative;background-color: rgb(255, 255, 255);box-shadow: 0px 8px 26px 0px rgba(212, 212, 212, 0.196);width: rem(670);height: rem(137);z-index: 25;margin:0 auto;
            .logoGps{width: rem(28);height:rem(38);position:absolute;left:rem(20);top:50%;transform:translateY(-50%);}
            .shadowBox{
                        margin-left: rem(70);padding-top:rem(30);.shiLogo{width: rem(30);height:rem(35);}
                        .shadowP{margin-bottom:rem(24);color:$titlecol;font-size: rem(28);}
                        .shadowSpn{margin-left:rem(14);color:$centerPcol;font-size: rem(24);}
              }}}}} 
  //风格 
 div.centerStyle{
       @include leftTop(rem(50),rem(-60));
        ul{
            li{ float:left;margin-bottom:rem(40);
                div.shadowStyle{
background-color: rgb(255, 255, 255);box-shadow: 0px 8px 26px 0px rgba(212, 212, 212, 0.196);
width: rem(300);height: rem(530);z-index: 15;
img{width:100%;height:rem(450);}p{line-height: rem(80);@include tac;}
                }
            }
       li:nth-of-type(2n){margin-left:rem(50);}     
        }
 }
 // 上新
    div.new{
        @include leftTop(rem(50),rem(-60));
        div.newShadow{background-color: rgb(255, 255, 255);box-shadow: 0px 8px 26px 0px rgba(212, 212, 212, 0.196);
            width: rem(670);height: rem(230);z-index: 21;img{width: rem(670);height: rem(230);}}
    }
    // 优惠
div.discount{
    @include leftTop(rem(-60));padding-left:40px;
    @include center;position:relative;
   li{margin-bottom:rem(40);}
    .discountSadow{
         background-color: rgb(255, 255, 255);
         box-shadow: 0px 8px 26px 0px rgba(212, 212, 212, 0.196);
         width: rem(670);
         position:relative;
         height: rem(230);
         z-index: 5;
        .boximg{float:left;margin:rem(10) 0 0 rem(20);img{width: rem(160);height: rem(160);}}
        .boxtitle{float:left;margin:rem(20) 0  0 rem(40);}
        .pPisi{position:absolute;left:rem(35);bottom:rem(20);font-size: rem(24);color:$centerPcol;}
        
        h1,h2{font-weight:normal;}
        .h1{a{color:$titlecol; &:hover{color:pink;}}}
        .h2{margin: rem(14) 0 rem(45) 0;}
        .h4{margin-top: rem(27);}
        .h3{margin-left:rem(12);}
        .h2,.h3{color:$centerPcol;line-height: 1;font-size:rem(24);}
        .h1,.h4{color:$titlecol;line-height: 1;font-size:rem(28);}
        
    }


    }
    //定位失败
    div.gps{width: 480rem/$fsz;margin:0 auto;margin-top: 50rem/$fsz;
        img{width: 70rem/$fsz;height: 96rem/$fsz;margin:0 auto;display:block;}
        .gpsP1{color:$centerPcol;font-size: 26rem/$fsz;margin:20rem/$fsz 0;@include tac;}
        .gpsBox{ 
            @include tac;line-height: 80rem/$fsz;position:relative;
            img{width: 34rem/$fsz;height: 34rem/$fsz;position:absolute;top:50%;transform:translateY(-50%);left:100rem/$fsz;}
            .gpsP2{color:#fff;}
            background-color: rgb(211, 201, 198);box-shadow: 0px 8px 26px 0px rgba(198, 198, 198, 0.392);width: 480rem/$fsz
            ;height: 80rem/$fsz;z-index: 20;font-size: 30rem/$fsz;border-radius:50rem/$fsz;
        }
        }
        // 显示状态
 .centerPpCur,.centerStyleCur,.discountCur,.newCur{display:none;}
}
